@<template>
  <div class="left">
    <!-- 导航 -->
    <div style="height: 100%">
      <!-- 权限是路由展示动态获取 -->
      <el-menu
        :default-active="active"
        class="el-menu-vertical-demo"
        @select="selectRouter"
        :collapse="isCollapse"
        style="height: 100%"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <div class="left-top flex-four">
          <img src="@/assets/logo.png" alt="" />
          <!-- 当收缩时候不显示 -->
          <span class="text-one" v-if="!isCollapse"
            >vue-admin-beautiful-pro</span
          >
        </div>
        <!-- div -->
        <div class="" v-for="(item,index) in listRouter" :key="index">
          
          <el-menu-item :index="item.path" v-if="!item.children">
          <i class="el-icon-menu"></i>
          <span>{{item.name}}</span>
        </el-menu-item>

        <el-submenu index="1" v-else>
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">{{item.name}}</span>
          </template>
          <!-- 循环子级 children -->
          <el-menu-item-group >
            <el-menu-item v-for="(childrenitem,childrenindex) in item.children" :key="childrenindex" :index="childrenitem.path">{{childrenitem.name}}</el-menu-item>
            <!-- <el-menu-item index="/froms">表单</el-menu-item> -->
          </el-menu-item-group>
        </el-submenu>
        </div>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listRouter: [
    
       ],
    };
  },
  computed: {
    isCollapse: function () {
      //console.log(this.$store.state.expansion)  //获取到vuex state中的数据
      return this.$store.state.expansion;
    },
    active: function () {
      //获取路由记录中routerData数组中show:true
      let arr = this.$store.state.routerData;
      let item = arr.find((item) => {
        return item.show == true;
      });
      return item.path;
    },
  },
  created(){
     //获取权限
     this.listRouter = JSON.parse(sessionStorage.getItem('routerList'))
  },
  mounted(){
     //
  },
  methods: {
    selectRouter(key) {
      //  console.log(key)
      this.$router.push(key);
    },
  },
};
</script>

<style scoped lang='less'>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

//
.left {
  .left-top {
    color: #fff;
    height: 56px;
    img {
      width: 32px;
      height: 32px;
      margin-left: 14px;
    }
  }
}
</style>